<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="状态">
          <el-select
            v-model="listQuery.status"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="审核状态">
          <el-select
            v-model="listQuery.auditStatus"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in auditStatusOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="生产项目货号">
          <el-input
            v-model="listQuery.productionGoodsCode"
            type="text"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="生产项目简称">
          <el-input
            v-model="listQuery.productionGoodsAbbr"
            type="text"
            size="mini"
          />
        </el-form-item> -->
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="handleSearch()"
          >
            搜索
          </el-button>
          <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-plus"
            @click="handleCreate()"
          >
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="listLoading" :data="list" highlight-current-row>
        <el-table-column label="状态" width="100px" fixed="left">
          <template slot-scope="{ row }">
            <el-tag :type="isTagType(row.status)">
              {{ formatByKeyValue(statusOptions, row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="审核状态" width="100px" fixed="left">
          <template slot-scope="{ row }">
            <el-tag :type="isTagType(row.auditStatus)">
              {{ formatByKeyValue(auditStatusOptions, row.auditStatus) }}
            </el-tag>
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          label="生产项目货号"
          prop="productionGoodsCode"
          width="150px"
          fixed="left"
        />
        <el-table-column
          label="生产项目简称"
          prop="productionGoodsAbbr"
          width="150px"
          fixed="left"
        /> -->
        <el-table-column
          label="模板名称"
          prop="recordTemplateName"
          min-width="200px"
        />
        <el-table-column label="备注" prop="memo" min-width="200px" />
        <el-table-column label="创建人" prop="createUserName" width="100px" />
        <el-table-column label="创建时间" prop="auditTime" width="160px" />
        <el-table-column label="更新人" prop="updateUserName" width="100px" />
        <el-table-column label="更新时间" prop="updateTime" width="160px" />
        <el-table-column
          label="审核意见"
          prop="auditContent"
          min-width="100px"
        />
        <el-table-column label="审核人" prop="auditUserName" width="100px" />
        <el-table-column label="审核时间" prop="auditTime" width="160px" />
        <el-table-column label="操作" align="center" width="80px" fixed="right">
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item
                  v-if="row.status !== 1"
                  @click.native="handleUpdateStatus(row)"
                >
                  启用
                </el-dropdown-item>
                <el-dropdown-item
                  v-else
                  @click.native="handleUpdateStatus(row)"
                >
                  停用
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleDesign(row)">
                  设计
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleEdit(row)">
                  编辑
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleCopy(row)">
                  复制
                </el-dropdown-item>
                <!-- <el-dropdown-item
                  v-if="row.auditStatus === 0"
                  @click.native="handleAudit(row)"
                >
                  审核
                </el-dropdown-item> -->
                <el-dropdown-item @click.native="handleDelete(row)">
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getList"
      />
      <Save
        :visible.sync="saveDialogVisible"
        :dialog-status="saveDialogStatus"
        :scope="scope"
        :current-template="currentRow"
        @save="handleSave"
      />
    </div>
  </div>
</template>

<script>
import {
  listPreOptions,
  pageManufactureRecordTemplate,
  updateRecordTemplateForStatus,
  deleteTemplate,
  copyTemplate
} from '@/api/rs/recordTemplate'
import { formatByKeyValue, isTagType } from '@/utils'
import { fromBase64X } from '@/utils/string-util'

import Pagination from '@/components/Pagination'
import Save from './components/save'

export default {
  components: {
    Pagination,
    Save
  },
  data() {
    return {
      scope: fromBase64X(this.$route.params.scope, 1),
      statusOptions: null,
      auditStatusOptions: null,
      listLoading: false,
      list: null,
      total: 0,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        scope: fromBase64X(this.$route.params.scope, 1)
      },
      currentRow: null,
      saveDialogStatus: 'create',
      saveDialogVisible: false
    }
  },
  mounted() {
    console.log(this.scopeIndex, '737373737')
    listPreOptions().then((response) => {
      const data = response.data
      this.statusOptions = data.status
      this.auditStatusOptions = data.auditStatus
    })
    this.getList()
  },

  methods: {
    isTagType,
    formatByKeyValue,
    getList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      pageManufactureRecordTemplate(this.listQuery).then((res) => {
        this.list = res.data.rows
        this.total = res.data.total
      })
    },
    handleSearch() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    handleCreate() {
      this.currentRow = null
      this.saveDialogStatus = 'create'
      this.saveDialogVisible = true
    },
    handleEdit(row) {
      this.currentRow = row
      this.saveDialogStatus = 'update'
      this.saveDialogVisible = true
    },
    handleSave() {
      this.handleSearch()
    },
    handleCopy(row) {
      const data = {
        recordTemplateId: row.recordTemplateId,
        withGroup: true,
        withItem: true
      }
      copyTemplate(data)
        .then((res) => {
          this.$message.success('复制成功')
          this.getList()
        })
        .finally(() => {
          this.getList()
        })
    },
    handleUpdateStatus(row) {
      this.$confirm('此操作将改变模板状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          updateRecordTemplateForStatus({
            recordTemplateId: row.recordTemplateId,
            status: row.status === 2 ? 1 : 2
          }).then((res) => {
            this.getList()
          })
        })
        .catch(() => {
          //
        })
    },
    handleAudit(row) {},
    handleDelete(row) {
      this.$confirm('此操作将取消该模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log(row, 'eeeee')
          deleteTemplate({ recordTemplateId: row.recordTemplateId }).then(
            (res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getList()
            }
          )
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleDesign(row) {
      console.log(this.scope, 'eiieieieiei')
      if (Number(this.scope) === 1) {
        this.$router.push(
          '/manufacture/template_design/' +
            this.$route.params.scope +
            '/' +
            row.recordTemplateId
        )
      } else {
        this.$router.push(
          '/qm/template_design/' +
            this.$route.params.scope +
            '/' +
            row.recordTemplateId
        )
      }
    }
  }
}
</script>
